;<script lang="ts">
/**
 * @author Yuanr
 * @description 图片预览
 * @param {boolean} hoverView=false - hover是否显示预览图
 * @param {string | string[]} picList 大图url/url集合
 */
import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
import VueLazyload from "vue-lazyload";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require("./error.png"),
  loading: require("./loading.gif"),
  attempt: 1
});
Vue.use(Viewer);

@Component
export default class ViewerView extends Vue {
  @Prop() public picList!: string[] | string;
  @Prop({ default: 0 }) public index!: number;
  public $viewer: any = null;

  get bigPictures() {
    return typeof this.picList === "string" ? [this.picList] : this.picList;
  }

  public inited(viewer: any) {
    this.$viewer = viewer;
  }

  public showImage(index: number) {
    this.$viewer.index = index;
    this.$viewer.show();
  }
}
</script>
<template>
  <viewer style="display:none;" :images="bigPictures" @inited="inited" ref="viewer">
    <template slot-scope="scope">
      <img v-for="(src, index) in scope.images" :src="src" :key="src + index" />
    </template>
  </viewer>
</template>
